<template>
    <div class="addBank">
        <div class="top">
            <el-breadcrumb separator=">">
                <el-breadcrumb-item  class="font-gray hand" :to="{ path: 'bank' }">银行卡</el-breadcrumb-item>
                <el-breadcrumb-item class="hand font-white">添加银行卡</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <el-form ref="form" :model="form" label-width="160px">
                <el-form-item label="姓名">
                    <el-input v-model="form.name" ></el-input>
                </el-form-item>
                <el-form-item label="银行卡号">
                    <el-input v-model="form.bank" ></el-input>
                </el-form-item>
                <el-form-item label="证件号">
                    <el-input v-model="form.idCard" ></el-input>
                </el-form-item>
                <el-form-item label="预留手机号">
                    <el-input v-model="form.phone" ></el-input>
                </el-form-item>
               <el-form-item label="验证码">
                        <el-input  prefix-icon="" class="code"  v-model="form.verifyCode"   placeholder="输入验证码">              
                            <el-button slot="append"
                                v-if="!countDown"
                                class="verification "                   
                                @click.prevent="getVerify()"
                                style="color:#fff;">
                                获取验证码
                                </el-button>
                                <el-button slot="append"
                                v-else
                                 class="verification "  
                                >
                                已发送({{countDown}}s)
                                </el-button>
                        </el-input>
                </el-form-item> 
                
                <el-form-item>
                    <el-btton class="btn-add">立即添加</el-btton>
                </el-form-item>
            </el-form>

        </div>

            
      
    </div>
</template>

<script>
import {mapState} from 'vuex'
import {regPhone} from '@/assets/js/rule'
import {addBank,getVerifyCode} from '@/ajax/index'
export default {
    name:'AddBank',
    data(){
        return{
            countDown:0,
            form:{
                name:'',
                bank:'',
                phone:'',
                idCard:'',
                verifyCode:''
            },
            rules: {
                name:[
                    {required: true, message: '请输入手机号', trigger: ['blur','change']},
                ],
                bank:[
                    {required: true, message: '请输入银行卡号', trigger: ['blur','change']},
                ],
                idCard:[
                    {required: true, message: '请输入证件号', trigger: ['blur','change']},
                ],
                phone:[
                     {required: true, message: '请输入手机号码', trigger: ['blur','change']},
                ],
                verifyCode:[
                {required: true, message: '验证码', trigger: ['blur','change']},
                ],
            }
        }
    },
    mounted(){

    },
    methods:{
        async AddBankCard(){
            const param = {
                'customerId':this.$store.state.userId,
                'name': this.form.name,
                'bancard':this.form.bank,
                'phone': this.form.phone,
                'verificationCode': this.form.verifyCode,
                'idcard': this.form.idCard      
            }
            const result = await addBank(param)
            if(result.code === '200' && result.data.state === '1'){
                alert('绑卡成功')
            }else{
                alert(result.data.message);
            }
        },
        // @description: 获取短信验证码 
        async getVerify() {
        if (regPhone(this.form.phone)) {
            const param = {
                    'phoneNum': this.form.phone
            }
            let result = await getVerifyCode(param);
            if(result.code === '200' && result.data.state === '1'){
                    this.form.verifyCode = result.data.data;
                    console.log(this.verifyCode);
            }else{
                    this.$message({
                        message:result.data.message,
                        type: 'error',
                        duration:2000,               
                    });
                    return false;
            }
            this.countDown = 60;
            this.intervalId = setInterval(() => {
                this.countDown--;
                // 判断
                if (this.countDown === 0) {
                clearInterval(this.intervalId);
                }
            }, 1000);
            }else{
            this.$message({
                    message: '请输入正确的手机号',
                    type: 'error',
                    duration:2000,               
                });
                return false;
            }
        }

    }
}
</script>
<style>

.addBank .el-breadcrumb{display: inline-block;font-size: 14px;line-height: 46px;}
.addBank .el-breadcrumb__inner,.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover{color: #72739c!important;}
.addBank .el-breadcrumb__item:last-child .el-breadcrumb__inner,.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{color: #fff!important;cursor: pointer!important;}
.addBank .el-form-item__label{color: #c3c4ea;padding-right: 20px;} 
.addBank .el-input__inner{background-color: #242645;border: none;border-radius: 4px;text-align: right;color: #fff;}
.addBank .code .el-input__inner{text-align: left;}
.addBank .el-input-group__append{background-color: #242645;border: none;border-left:1px solid;}
</style>


<style lang="less" scoped>
.addBank{
    margin-top: 60px;
    .el-form{width: 500px;margin: 20px auto;}
    .btn-add{display: block;width: 100%;text-align: center;border-radius: 4px;
    background: -webkit-linear-gradient(left, #77e0f7 ,#29a8d1); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #77e0f7,#29a8d1) ;/* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #77e0f7,#29a8d1); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #77e0f7 , #29a8d1); /* 标准的语法 */
    }
}
</style>


